<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"/>
            <span class="details_HeaderTitle">订单信息</span>
          </div>

          <div style="display: flex">
            <el-button v-show="orderStatus == 0 " v-permission="['order.acceptOrder']"
                       type="primary" @click="confirmClick">确认接单
            </el-button>
            <el-button v-show="orderStatus == 1 " v-permission="['order.confirmPay']"
                       type="primary" @click="paymentClick">确认付款
            </el-button>
            <el-button v-show="orderStatus == 2 " v-permission="['order.completeOrder']"
                       type="primary" @click="completeClick">订单完成
            </el-button>

            <el-button
              v-show="orderStatus == 0 || orderStatus==1" v-permission="['order.closeOrder']"
              type="danger" @click="cancelClick">关闭订单
            </el-button>

          </div>
        </div>
        <!--    订单信息      -->
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单编号</span>
              <span class="deleted_OrderTitle">{{ form.id }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属公司</span>
              <span class="deleted_OrderTitle">{{ form.companyName }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单状态</span>
              <el-tag v-if="form.status!=null" :type="watchOrderType(form.status)">
                <span>
                  {{ watchOrderStatus(form.status) }}
                </span>
              </el-tag>
<!--              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ watchStatus(form.status) }}</span>-->
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8"/>
            <el-col :span="8"/>
            <el-col :span="8"/>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">创建日期</span>
<!--              <span class="deleted_OrderTitle">{{ form.createData | dateFormatter }}</span>-->
              <span class="deleted_OrderTitle">{{ form.createDate  }}</span>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<span class="deleted_Row_Headings">修改日期</span>-->
              <!--<span class="deleted_OrderTitle">{{ form.modifyDate }}</span>-->
            <!--</el-col>-->
            <!--<el-col :span="8"/>-->
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">采购商</span>
              <span class="deleted_OrderTitle">{{ form.customerName }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">供应商</span>
              <span class="deleted_OrderTitle">{{ form.supplierName }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">油库</span>
              <span class="deleted_OrderTitle">{{ form.warehouse.name }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">交易模式</span>
              <span class="deleted_OrderTitle">{{ watchOrderMatch(form.orderMethod) }}</span>
<!--              <span class="deleted_OrderTitle">{{ form.orderMethod }}</span>-->
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">提供方式</span>
              <span class="deleted_OrderTitle">{{ watchDelivery(form.delivery) }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">锁油期限(天)</span>
              <span class="deleted_OrderTitle">{{ form.limitDay }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">备注</span>
              <span class="deleted_OrderTitle">{{ form.memo }}</span>
            </el-col>
            <el-col :span="8"/>
            <el-col :span="8"/>
          </el-row>
<!--          <el-row :gutter="24" class="deleted_OrderContent">-->
<!--            <el-col :span="8" v-if="form.delivery == 1 || form.delivery == 2 || form.delivery == 3">-->
<!--              <span class="deleted_Row_Headings" v-if="form.delivery == 1" style="color: red">车提:</span>-->
<!--              <span class="deleted_Row_Headings" v-if="form.delivery == 2" style="color: red">船提:</span>-->
<!--              <span class="deleted_Row_Headings" v-if="form.delivery == 3" style="color: red">火车:</span>-->
<!--              <span class="deleted_OrderTitle" style="padding-left: 10px;color: red">{{ form.delivery }}</span>-->
<!--            </el-col>-->
<!--          </el-row>-->
        </div>
        <!--    采购方信息    -->
        <div class="details_PayHeader" v-if="form.buyyer">
          <div class="deleted_Line"/>
          <span class="details_HeaderTitle">采购方信息</span>
        </div>
        <div v-if="form.buyyer">
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">公司名称</span>
                <span style=" color: #409EFF; margin-left: 5px; display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">{{form.buyyer.name}}</span>
                <!--<a class="deleted_Row_Headings"-->
                   <!--style="color: #409EFF; margin-left: 5px; display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">详情</a>-->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">状态</span>
                <el-tag style="margin-left: 10px" :type="form.buyyer.status == 1 ? 'success' : 'warning'" size="mini" effect="light">
                  <span >{{ watchCompanyStatus(form.buyyer.status) }}</span>
                </el-tag>
              </div>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">创建时间</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.buyyer.createDate }}</span>-->
              <!--</div>-->
            <!--</el-col>-->

          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">所属账户</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.buyyer.companyName }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">所属集团</span>
                <span class="deleted_OrderTitle">{{ form.buyyer.groupName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">公司类型</span>
                <span class="deleted_OrderTitle">{{ form.buyyer.nature | watchNature}}</span>
              </div>
            </el-col>
            <el-col :span="8" >
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系人</span>
                <span class="deleted_OrderTitle">{{ form.buyyer.linkman }}</span>
              </div>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">修改时间</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.buyyer.modifyDate }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系电话</span>
                <div>
                  <span class="deleted_OrderName">{{ form.buyyer.phone }}</span>
                  <!--<span class="deleted_OrderName" style="margin-top: 5px; width: auto;">{{ form.buyyer.address }}</span>-->
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">详情地址</span>
                <span class="deleted_OrderTitle">{{ form.buyyer.address }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--    商品明细      -->
        <div class="product_header_name">
          <div class="deleted_Line"/>
          <span style="margin: 10px 5px;">商品明细</span>
        </div>
        <!--    商品规格      -->
        <el-table :data="tableData" border show-summary stripe style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center" fixed/>
          <!--          <el-table-column label="缩略图" width="80">-->
          <!--            <template slot-scope="{row}">-->
          <!--              <img :src="row.logo" style="width: 100%;"></img>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="产品名称">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" width="150" align="center">
            <template slot-scope="{row}">
              <span>{{ row.sn }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="商品库" >-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ row.goodsName }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="所属公司" >-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ row.companyName }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="供应商" >-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ row.customerName }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="最小起订量" width="100" align="center">-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ row.minimum }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="预售价格" width="50" align="right" prop="presalePrice">-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ row.presalePrice }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="油价" width="90" align="right" prop="unit">
            <template slot-scope="{row}">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="加价" width="90" align="right" prop="addPrice">
            <template slot-scope="{row}">
              <span>{{ row.addPrice }}</span>
            </template>
          </el-table-column>
<!--          <el-table-column label="购买单价" align="right" width="50">-->
<!--            <template slot-scope="{row}">-->
<!--              <span>{{ row.price }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="吨数" align="right" width="80" prop="quantity">
            <template slot-scope="{row}">
              <span>{{ row.quantity }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="状态" align="center" width="80">-->
            <!--<template slot-scope="{row}">-->
              <!--<span>{{ watchOrderStatus(form.status) }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="合计" align="right" width="120" prop="subTotal"/>

        </el-table>

        <!--<el-row class="deleted_OrderHeader" style="padding-left:30px">-->
<!--          <el-col :span="5">-->
<!--            <span class="deleted_Row_Headings">运费</span>-->
<!--            <span class="deleted_OrderTitle">0</span>-->
<!--            <span v-if="false" style="font-size: 16px;color: red">含加急</span>-->
<!--          </el-col>-->
          <!--<el-col :span="5">-->
            <!--<span class="deleted_Row_Headings">实收金额</span>-->
            <!--<span class="deleted_OrderTitle" style="color:red" v-if="form.status == 1"></span>-->
<!--            <span class="deleted_OrderTitle" style="color:red" v-else>{{ tableData[0].subTotal }}</span>-->
          <!--</el-col>-->
        <!--</el-row>-->

        <!--    供应商信息      -->
        <div class="details_PayHeader" v-if="form.seller">
          <div class="deleted_Line"/>
          <span class="details_HeaderTitle">供应商信息</span>
        </div >
        <div v-if="form.seller">
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">公司名称</span>
                <span
                  style=" color: #409EFF; margin-left: 5px; display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">{{
                    form.seller.name
                  }}</span>
                <!--<a class="deleted_Row_Headings"-->
                   <!--style="color: #409EFF; margin-left: 5px; display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">详情</a>-->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">状态</span>
                <el-tag style="margin-left: 10px" :type="form.seller.status == 1 ? 'success' : 'warning'" size="mini" effect="light">
                  <span >{{ watchCompanyStatus(form.seller.status) }}</span>
                </el-tag>
              </div>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">创建时间</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.seller.createDate }}</span>-->
              <!--</div>-->
            <!--</el-col>-->

          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">所属集团</span>
                <span class="deleted_OrderTitle">{{ form.seller.groupName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">公司类型</span>
                <span class="deleted_OrderTitle">{{ form.seller.nature | watchNature}}</span>
              </div>
            </el-col>
            <el-col :span="8" >
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系人</span>
                  <span class="deleted_OrderTitle">{{ form.seller.linkman }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系电话</span>
                  <span class="deleted_OrderName">{{ form.seller.phone }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--    油库信息    -->
        <div class="details_PayHeader" v-if="form.warehouse">
          <div class="deleted_Line"/>
          <span class="details_HeaderTitle">油库信息</span>
        </div>
        <div v-if="form.warehouse">
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">油库名称</span>
                <span style=" color: #409EFF; margin-left: 5px; display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">{{
                    form.warehouse.name
                  }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings" >油库编码</span>
                <span class="deleted_OrderTitle">{{ form.warehouse.code }}</span>
              </div>
            </el-col>
            <el-col :span="8" >
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系人</span>
                <span class="deleted_OrderTitle">{{ form.warehouse.linkman }}</span>
              </div>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">供应商</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.warehouse.customerName  }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
          <!--<el-row :gutter="24" class="deleted_OrderContent">-->
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">所属公司</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.warehouse.companyName }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">创建时间</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.warehouse.createDate }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="8">-->
              <!--<div class="details_Buyers">-->
                <!--<span class="deleted_Row_Headings">修改时间</span>-->
                <!--<span class="deleted_OrderTitle">{{ form.warehouse.modifyDate }}</span>-->
              <!--</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系方式</span>
                <div>
                  <span class="deleted_OrderName">{{ form.warehouse.phone }}</span>
                  <!--<span class="deleted_OrderName" style="margin-top: 5px; width: auto;">{{ form.warehouse.address }}</span>-->
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">详情地址</span>
                <span class="deleted_OrderTitle">{{ form.warehouse.address }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <div>
    </div>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import {EventBus} from "@/api/eventBus";
import {mapGetters} from "vuex";

import {find, update, del, confirm, complete, cancel, payment} from "@/api/order";
import {find as findCompany} from "@/api/company";
import {find as findCustomer} from "@/api/customer";
import {find as findGroup} from "@/api/group";
import {find as findGoods} from "@/api/goods";

import utils from "../../utils/utils.js";
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
// import sendList from "./components/send";

export default {
  name: "order-view",
  directives: {
    elDragDialog,
    permission,
  },
  data() {
    return {
      clicked: false,
      deliveryClick: false,
      returnClick: false,
      form: {
        id: null,
        buyyer: {
          id: null,
          // name: "",
          // logo: "",
          // createDate: "",
          // modifyDate: "",
          // companyId: "",
          // groupId: '',
          // linkman: "",
          // address: "",
          // meta: "",
          // metaInfo: {},
          // msg: "",
          // nature: "",
          // phone: "",
          // status: '',
          // type: '',
        },
        product:
          {
            id: null,
          }
        ,
        seller: {
          id: null,
        },
        warehouse: {
          id: null,
        }
      },
      groupName:"",
      companyName:"",
      customerId:"",
      goodsName: "",

      timeVisible: false,
      times: null,
      pageNum: 1,
      pageSize: 20,
      isNoInstall: false,
      orderLog: [],

      officeName: "",
      operatorName: "",
      orderStatus: '',

      paymentStatus: '',

      returnsType: false,
      logisticsVisible: false,
      logisticsDetailVisible: false,
      payments: [],

      orderPlans: [],
      dialogVisible: false,
      addressType: false,
      pauseDate: "",
      tableData: [],
      currentRow: null,

    };
  },
  filters: {
    watchType(val) {
      if (val == 1) {
        return '供应商'
      } else {
        return '采购方'
      }
    },
    watchNature(val) {
      if (val == 1) {
        return '贸易公司'
      } else if(val == 2){
        return '零售终端'
      }else{
        return '用油企业'
      }
    },
    watchStatus(val) {
      if (val == 1) {
        return '已认证'
      }
      if (val == 2) {
        return '已驳回'
      } else {
        return '未认证'
      }
    },
  },
  watch: {
    $route(newVal, oldVal) {
      if (
        newVal.name == "order-view" &&
        newVal.query.id != this.form.id
      ) {
        this.form.id = newVal.query.id;
        this.findClick();
      }
    },
    orderStatus(newVal, oldVal){
      this.orderStatus = newVal
    },
  },
  computed: {
    ...mapGetters(["token"]),
  },
  created() {
    var _this = this;
    this.times = new Date().getSeconds();
    _this.form.id = this.$route.query.id;
    let date = new Date();
    _this.findClick();
    EventBus.$on("order-edit", (res) => {
      _this.form.id = res.id;
      _this.findClick();
    });
    EventBus.$on("order-view", (res) => {
      _this.form.id = res.id;
      _this.findClick();
    });
  },
  components: {
    // sendList
  },
  methods: {

    watchOrderStatus(val) {
      if (val == 0) {
        return "待接单"
      } else if (val == 1) {
        return "待付款"
      } else if (val == 2) {
        return "已付款"
      } else if (val == 9) {
        return "已完成"
      } else if (val == 10) {
        return "已关闭"
      }
    },
    watchOrderType(val) {
      if (val == 0) {
        return 'primary'
      } else if (val == 1) {
        return 'warning'
      } else if (val == 2) {
        return 'success'
      } else if (val == 9) {
        return 'info'
      }
    },

    watchOrderMatch(val) {
      if (val == 1) {
        return "锁涨不跌"
      } else if (val == 2) {
        return "锁涨追跌"
      }
    },
    watchDelivery(val) {
      if (val == 1 || val == 0) {
        return "车提"
      } else if (val == 2) {
        return "船提"
      } else if (val == 3) {
        return "火车"
      }
    },
    // watchNature(val) {
    //   if (val == 1) {
    //     return '贸易公司'
    //   } else if (val == 2) {
    //     return '零售终端'
    //   } else if (val == 3) {
    //     return '用油企业'
    //   }
    // },
    watchCompanyStatus(val) {
      if (val == 0) {
        return '未认证'
      } else if (val == 1) {
        return '已认证'
      } else if (val == 2) {
        return '驳回'
      }
    },

    planStatus(val) {
      if (val == '0') {
        return this.$t('order.view.planStatus[0]')
      } else if (val == '1') {
        return this.$t('order.view.planStatus[1]')
      } else if (val == '2') {
        return this.$t('order.view.planStatus[2]')
      }
    },
    weekClick(data) {
      this.weekTime = data.join("");
      // this.calculateEstimateDateClick();
    },

    timeClose() {
      this.timeVisible = false;
      this.findClick();
    },
    installClose() {
      this.isNoInstall = false;
    },
    changeTime() {
      this.timeVisible = true;
    },
    cancelTime() {
      this.timeVisible = false;
      this.findClick();
    },
    recoveryClick() {
      var _this = this;
      this.$confirm(this.$t('order.view.recoveryClick[0]'), this.$t('order.view.recoveryClick[1]'), {
        confirmButtonText: this.$t('order.view.recoveryClick[2]'),
        cancelButtonText: this.$t('order.view.recoveryClick[3]'),
        type: "warning",
      }).then(() => {
        const params = new URLSearchParams();
        params.append("orderId", this.form.id);
        pause(params)
          .then((res) => {
            console.log(res);
            _this.$message({
              message: this.$t('order.view.recoveryClick[4]'),
              offset: 120,
              center: true,
            });
            this.dialogVisible = false;
            _this.findClick();
          })
      });
    },
    datetimeFormatTT(time) {
      var date = new Date(time);
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    GetDateDiff(startTime, endTime, diffType) {
      startTime = startTime.replace(/\-/g, "/");  //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
      endTime = endTime.replace(/\-/g, "/");  //将计算间隔类性字符转换为小写
      diffType = diffType.toLowerCase();
      var sTime = new Date(startTime); //开始时间
      var eTime = new Date(endTime); //结束时间
      var timeType = 1;   //作为除数的数字
      switch (diffType) {
        case"second":
          timeType = 1000;
          break;
        case"minute":
          timeType = 1000 * 60;
          break;
        case"hour":
          timeType = 1000 * 3600;
          break;
        case"day":
          timeType = 1000 * 3600 * 24;
          break;
        default:
          break;
      }
      return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
    },
    timeStamp(second_time) {
      let time = parseInt(second_time) + "秒";
      if (parseInt(second_time) > 60) {
        let second = parseInt(second_time) % 60;
        let min = parseInt(second_time / 60);
        time = min + "分";
        if (min > 60) {
          min = parseInt(second_time / 60) % 60;
          let hour = parseInt(parseInt(second_time / 60) / 60);
          if (min == 0) {
            time = hour + "小时";
          } else {
            time = hour + "小时" + min + "分";
          }
          if (hour > 24) {
            hour = parseInt(parseInt(second_time / 60) / 60) % 24;
            let day = parseInt(parseInt(parseInt(second_time / 60) / 60) / 24);
            time = day + "天" + hour + "小时" + min + "分";
          }
        }
      }
      return time;
    },
    getFullTime(timestamp) {
      let date = new Date(timestamp);    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getMinutes() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    findClick() {
      var _this = this;
      var form = {};
      console.log('id',_this.form.id)
      find(_this.form.id)
        .then((response) => {
          _this.form = response.data.order
            this.orderStatus = response.data.order.status;

          // let estimateDate = this.getFullTime(response.data.order.estimateDate )  // 86400000
          let createDate = this.datetimeFormatTT( response.data.order.createDate)
          let modifyDate = this.datetimeFormatTT( response.data.order.modifyDate)
          if(createDate){
            _this.form.createDate = createDate
          }
          if(modifyDate){
            _this.form.modifyDate = modifyDate
          }

          if(response.data.company!=null){

              _this.form.companyName = response.data.company.name;

          }
          if(response.data.order.buyyer !== null){
            _this.form.customerName = response.data.order.buyyer.name
          }
          if(response.data.order.seller !== null ){
            _this.form.supplierName = response.data.order.seller.name
          }

          //采购方
          if(!utils.isNull(response.data.order.buyyer)) {
            let createDate = this.datetimeFormatTT(response.data.order.buyyer.createDate)
            let modifyDate = this.datetimeFormatTT(response.data.order.buyyer.modifyDate)
            if (createDate) {
              _this.form.buyyer.createDate = createDate
            }
            if (modifyDate) {
              _this.form.buyyer.modifyDate = modifyDate
            }
          }
          //供应商
          if(!utils.isNull(response.data.order.seller)) {
            let createDate = this.datetimeFormatTT(response.data.order.seller.createDate)
            let modifyDate = this.datetimeFormatTT(response.data.order.seller.modifyDate)
            if (createDate) {
              _this.form.seller.createDate = createDate
            }
            if (modifyDate) {
              _this.form.seller.modifyDate = modifyDate
            }

          }
          //油库
          if(!utils.isNull(response.data.order.warehouse)){
              let createDate = this.datetimeFormatTT( response.data.order.warehouse.createDate)
              let modifyDate = this.datetimeFormatTT( response.data.order.warehouse.modifyDate)
              if(createDate){
                _this.form.warehouse.createDate = createDate
              }
              if(modifyDate){
                _this.form.warehouse.modifyDate = modifyDate
              }

          }
          //商品

          if(!utils.isNull(response.data.order.product)){


            let list = {
              name: response.data.order.product.name,
              sn: response.data.order.product.sn,
              goodsName:_this.goodsName,
              companyName:_this.companyName,
              customerName:response.data.order.seller.name,
              limitDay: response.data.order.product.limitDay,
              presalePrice: response.data.order.product.price,//预售价格
              minimum: response.data.order.product.minimum,//最小起订量

              price: response.data.order.price,//油品单价
              quantity: response.data.order.quantity,//购买吨数
              addPrice: response.data.order.addPrice,//加价销售
              subTotal: 0
            }

            let subTotal = 0;
            if(parseFloat(list.addPrice) > 0){
               subTotal = (parseFloat(list.price) + parseFloat(list.addPrice)) * parseFloat(list.quantity)
            }else {
               subTotal = parseFloat(list.price) * parseFloat(list.quantity)
            }
            list.subTotal = subTotal.toFixed(2);


            let tableData = []
            tableData.push(list)
            if(tableData.length > 0){
              _this.tableData = tableData
            }
            console.log(_this.tableData)
          }
        })

      console.log(_this.form,'form')
    },
    editClick() {
      this.$router.push({
        path: "/order/edit",
        query: {
          id: this.form.id,
        },
      });
    },
    cancelClick() {
      this.$confirm('是否确定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        cancel(this.form.id)
          .then((response) => {
            console.log(response);
            this.$message({
              message: response.content,
              offset: 120,
              center: true,
            });
            EventBus.$emit("order-detail", data);
            this.findClick();
          })
          .catch((error) => {
          });
      });
    },
    confirmClick() {
      this.$confirm('是否确定接单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        const params = new URLSearchParams()
        params.append('id', this.form.id)
        confirm(params)
          .then((response) => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true,
            });
            EventBus.$emit("order-detail", data);
            this.findClick();
          })
          .catch((error) => {
          });
      });
    },
    //确认付款
    paymentClick(){
      this.$confirm('是否确定已付款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        const params = new URLSearchParams()
        params.append('id', this.form.id)
        payment(params)
          .then((response) => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true,
            });
            EventBus.$emit("order-detail", data);
            this.findClick();
          })
          .catch((error) => {
          });
      });
    },
    //订单已完成
    completeClick(){
      this.$confirm('是否确定订单已完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        const params = new URLSearchParams()
        params.append('id', this.form.id)
        complete(params)
          .then((response) => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true,
            });
            EventBus.$emit("order-detail", data);
            this.findClick();
          })
          .catch((error) => {
          });
      });
    },
    // updateClick(){
    //   this.$confirm('是否更新订单?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: "warning",
    //   }).then(() => {
    //     const list = {
    //       id: 18,
    //       companyId: 16,
    //       supplierId: 22,
    //       customerId: 21,
    //       productId: 19,
    //       warehouseId: 23,
    //       status: 2,
    //       price: 12,
    //       addPrice: 11,
    //       quantity: 1,
    //       delivery: 3,
    //       orderMethod: 2,
    //       linkman: "string",
    //       phone: "13959687897",
    //       memo: "哈哈",
    //
    //   }
    //     update(list)
    //       .then((response) => {
    //         this.$message({
    //           message: response.content,
    //           offset: 120,
    //           center: true,
    //         });
    //         this.findClick();
    //       })
    //       .catch((error) => {
    //       });
    //   });
    // },

    sendClose() {
      this.sendType = false;
      this.clicked = false;
    },
    returnsClick() {
      this.returnsType = true;
      this.times = new Date().getSeconds();
    },
    returnsClose() {
      this.returnsType = false;
    },
    logisticsClick() {
      // 查看物流
      const params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append("orderId", this.form.id);
      trackingNo_query(params).then((res) => {
        this.logisticsData = res.data.data;
        this.logisticsVisible = true;
      })
    },
    // cancelClick() {
    //   this.$confirm('是否确定关闭订单?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: "warning",
    //   }).then(() => {
    //     const params = new URLSearchParams()
    //     params.append('id', this.form.id)
    //     cancel(params)
    //       .then((response) => {
    //         this.$message({
    //           message: response.content,
    //           offset: 120,
    //           center: true,
    //         });
    //         EventBus.$emit("order-detail", data);
    //         this.findClick();
    //       })
    //       .catch((error) => {
    //       });
    //   });
    // },
  },
};
</script>

<style scoped>
.box-card {
  width: 100%;
  box-sizing: border-box;
}

.details_Header {
  display: flex;
  align-items: center;
}

.deleted_Line {
  width: 2px;
  height: 12px;
  background-color: #409eff;
}

.submit_payMethod_Content_Date {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 30, 0.3);
  line-height: 36px;
  /* display: block; */
  /* margin-top: 10rpx; */
}

.details_HeaderTitle {
  font-weight: 600;
  margin-left: 5px;
  display: block;
  width: 100px;
}

.deleted_OrderHeader {
  padding-top: 5px;
  padding-bottom: 10px;
  margin: 10px 0;
  border-left: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.deleted_OrderTitle {
  padding-left: 5px;
}

.deleted_OrderContent {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details_PayHeader {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

.details_Buyers {
  display: flex;
  align-items: center;
}

.deleted_Row_Headings {
  color: #666666;
}

.deleted_OrderName {
  color: #409eff;
  margin-left: 5px;
  width: 155px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product_header_name {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  margin-top: 20px;
  font-weight: 600;
}

.el-dialog-div {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.product_header_Plans {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  margin-top: 20px;
  font-weight: 600;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.product_header_Plans_left {
  display: flex;
  align-items: center;
}
</style>
